<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>metro-zTree</title>
<link rel="stylesheet" href="metro.css">
<link rel='stylesheet' href='../bootstrap-3.3.5/css/bootstrap.min.css'>
<script type="text/javascript" src="../jquery-1.12.0/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="jquery.ztree.all-3.5.min.js"></script>
</head>
<body>
<script>
    var zTree;
    var demoIframe;

    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
      /*   var addStr = "<span class='button remove' id='removeBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";

        addStr += "<span class='button add' id='addBtn_" + treeNode.tId + "'></span>";
        addStr += "<span class='button edit' id='editBtn_" + treeNode.tId + "'></span>";
        sObj.after(addStr); */
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.addNodes(treeNode, {id:(1000 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
            return false;
        });
    };

    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
        $("#removeBtn_"+treeNode.tId).unbind().remove();
        $("#editBtn_"+treeNode.tId).unbind().remove();
    };

    var setting = {
        check: {
            enable: true
        },
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable:true,
                idKey: "courseId",
                pIdKey: "courseFather",
                rootPId: ""
            }
        },
        callback: {
            beforeClick: function(treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    demoIframe.attr("src",treeNode.file + ".html");
                    return true;
                }
            }
        }
    };

    var zNodes =[
        {
            "courseId": 134,
            "name": "基础课程",
            "courseType": 1,
            "courseFather": 0
        },
        {
            "courseId": 142,
            "name": "国家课",
            "courseType": 2,
            "courseFather": 134
        },
        {
            "courseId": 162,
            "name": "语文",
            "courseType": 3,
            "courseFather": 142
        },
        {
            "courseId": 161,
            "name": "数学",
            "courseType": 3,
            "courseFather": 142
        },
        {
            "courseId": 160,
            "name": "英语",
            "courseType": 3,
            "courseFather": 142
        },
        {
            "courseId": 159,
            "name": "体育",
            "courseType": 3,
            "courseFather": 142
        },
        {
            "courseId": 158,
            "name": "美术",
            "courseType": 3,
            "courseFather": 142
        },
        {
            "courseId": 157,
            "name": "音乐",
            "courseType": 3,
            "courseFather": 142
        },
        {
            "courseId": 156,
            "name": "体质健康",
            "courseType": 3,
            "courseFather": 142
        },
        {
            "courseId": 147,
            "name": "科学",
            "courseType": 3,
            "courseFather": 142
        },
        {
            "courseId": 146,
            "name": "信息技术",
            "courseType": 3,
            "courseFather": 142
        },
        {
            "courseId": 135,
            "name": "实践课",
            "courseType": 2,
            "courseFather": 134
        },
        {
            "courseId": 153,
            "name": "书法",
            "courseType": 3,
            "courseFather": 135
        },
        {
            "courseId": 152,
            "name": "创客空间",
            "courseType": 3,
            "courseFather": 135
        },
        {
            "courseId": 151,
            "name": "戏剧",
            "courseType": 3,
            "courseFather": 135
        },
        {
            "courseId": 150,
            "name": "快乐晨间",
            "courseType": 3,
            "courseFather": 135
        },
        {
            "courseId": 149,
            "name": "外教",
            "courseType": 3,
            "courseFather": 135
        },
        {
            "courseId": 148,
            "name": "形体",
            "courseType": 3,
            "courseFather": 135
        },
        {
            "courseId": 145,
            "name": "综合实践",
            "courseType": 3,
            "courseFather": 135
        },
        {
            "courseId": 144,
            "name": "班队/品德",
            "courseType": 3,
            "courseFather": 135
        },
        {
            "courseId": 133,
            "name": "拓展课程",
            "courseType": 1,
            "courseFather": 0
        },
        {
            "courseId": 141,
            "name": "专业课",
            "courseType": 2,
            "courseFather": 133
        },
        {
            "courseId": 174,
            "name": "美术(专业)",
            "courseType": 3,
            "courseFather": 141
        },
        {
            "courseId": 173,
            "name": "琵琶(专业)",
            "courseType": 3,
            "courseFather": 141
        },
        {
            "courseId": 172,
            "name": "二胡(专业)",
            "courseType": 3,
            "courseFather": 141
        },
        {
            "courseId": 171,
            "name": "钢琴(专业)",
            "courseType": 3,
            "courseFather": 141
        },
        {
            "courseId": 170,
            "name": "大提琴(专业)",
            "courseType": 3,
            "courseFather": 141
        },
        {
            "courseId": 169,
            "name": "小提琴(专业)",
            "courseType": 3,
            "courseFather": 141
        },
        {
            "courseId": 168,
            "name": "声乐(专业)",
            "courseType": 3,
            "courseFather": 141
        },
        {
            "courseId": 167,
            "name": "舞蹈(专业)",
            "courseType": 3,
            "courseFather": 141
        },
        {
            "courseId": 136,
            "name": "选修课",
            "courseType": 2,
            "courseFather": 133
        },
        {
            "courseId": 166,
            "name": "选修",
            "courseType": 3,
            "courseFather": 136
        },
        {
            "courseId": 130,
            "name": "潜能课程",
            "courseType": 1,
            "courseFather": 0
        },
        {
            "courseId": 132,
            "name": "潜能课",
            "courseType": 2,
            "courseFather": 130
        }
    ];

    $(document).ready(function(){
        var t = $("#tree");
        t = $.fn.zTree.init(t, setting, zNodes);
        demoIframe = $("#testIframe");
        demoIframe.bind("load", loadReady);
        var zTree = $.fn.zTree.getZTreeObj("tree");
        zTree.selectNode(zTree.getNodeByParam("id", 101));

    });

    function loadReady() {
        var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
                htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
                maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
                h = demoIframe.height() >= maxH ? minH:maxH ;
        if (h < 530) h = 530;
        demoIframe.height(h);
    }
	function getChoosed(){
		var treeObj=$.fn.zTree.getZTreeObj("tree"),
        nodes=treeObj.getCheckedNodes(true),
            v="";
		for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";
            alert(nodes[i].courseId); 
        }
	}
</script>
<ul id="tree" class="ztree" style="width:560px; overflow:auto;"></ul>
<button onclick='getChoosed()'>获取选中节点</button>
</body>
</html>